<!DOCTYPE html>
<html>
<head>
<title>Sample: Payment</title>
<!-- default container look and feel -->
<link rel="stylesheet" href="gadgets.css">
<style>
  .gadgets-gadget-chrome {
    width: 80%;
    float: none;
    margin: auto;
  }
  .gadgets-gadget {
    width: 100%;
  }
  .desc {
    color:#007F00;
  }
  .desc script {
    color:#FF0000;
  }
  #payment-processor {
    width:600px;
    height:300px;
    left:100px;
    top:200px;
    position:absolute;
  }
  #payment-processor iframe {
    width:600px;
    height:300px;
  }
</style>

<script type="text/javascript" src="/gadgets/js/core:core.io:rpc:payment.js?c=1&debug=1"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="gadgets.js"></script>
<script type="text/javascript">

function output(message) {
  document.getElementById("output").innerHTML += gadgets.util.escapeString(message) + "<br/>";
};

var my = {};

my.LayoutManager = function() {
  gadgets.LayoutManager.call(this);
};
my.LayoutManager.inherits(gadgets.LayoutManager);
my.LayoutManager.prototype.getGadgetChrome = function(gadget) {
  var chromeId = 'gadget-chrome-' + gadget.id;
  return chromeId ? document.getElementById(chromeId) : null;
};
my.renderGadgets = function() {
  for (var i = 0; i < my.gadgetSpecUrls.length; ++i) {
    var gadget = gadgets.container.createGadget(
        {specUrl: my.gadgetSpecUrls[i], title: ("Sample App - " + i)});
    gadgets.container.addGadget(gadget);
    gadgets.container.renderGadget(gadget);
  }
};

my.gadgetSpecUrls = [
  'http://' + window.location.host + '/gadgets/files/container/sample-payment.xml'
];

my.init = function() {
  gadgets.container.layoutManager = new my.LayoutManager();
  
  // To enable io and rpc feature on container side.
  gadgets.config.init({
    'rpc' : {
      'parentRelayUrl' : '/gadgets/files/container/rpc_relay.html',
      'useLegacyProtocol' : false
    },
  
    'core.io' : {
      'proxyUrl' : 'http://%host%/gadgets/proxy?refresh=%refresh%&url=%url%',
      'jsonProxyUrl' : 'http://%host%/gadgets/makeRequest'
    }
  });
};

</script>
</head>
<body onLoad="my.init();my.renderGadgets()">
  <center>
    <h2>Sample: Virtual Currency Payment (gadgets.payment) </h2>
    <p class="desc">
      This page is a container page:<br>
      <b><script>document.write(window.location.href);</script></b>
    </p>
    </center>
  <div id="gadget-chrome-0" class="gadgets-gadget-chrome"></div>

  <div id="output" style="clear: left;">
  </div>

  <!-- The payment confirmation panel -->
  <div id="payment-processor" style="display:none;">
    <iframe name="payment-processor-frame" frameborder=0 src="sample-payment-processor.html"></iframe>
  </div>

</body>
</html>
